<!--
 * @Author: yushuang
 * @Date: 2024-12-16 10:20:05
 * @LastEditors: yushuang
 * @LastEditTime: 2024-12-16 10:49:08
 * @Description: 
-->
<script setup lang="ts">
import { computed } from 'vue';
import { omit } from '@v-c/utils';
import { useLayoutState } from '../../basic-layout/context';
import SubMenu from './sub-menu.vue';

const { splitState, menuData, handleSplitSelectedKeys } = useLayoutState();

const menuDataList = computed(() =>
  menuData.value?.map(v => ({ ...omit(v, ['children']), childrenCount: (v.children ?? []).length }))
);
</script>

<template>
  <a-menu
    mode="horizontal"
    theme="dark"
    class="ant-pro-sider-menu-header"
    :selected-keys="splitState.selectedKeys"
    @update:selected-keys="handleSplitSelectedKeys"
  >
    <template v-for="item in menuDataList">
      <template v-if="!item.hideInMenu">
        <SubMenu :key="item.path" :item="item" :link="item.childrenCount <= 0" />
      </template>
    </template>
  </a-menu>
</template>

<style lang="less">
.ant-pro-sider-menu-header {
  margin-left: 14px;
}
[data-theme='dark'] {
  .ant-pro-sider-menu-header {
    background: transparent;
  }
}
</style>
